<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { RouterView } from "vue-router";
import { useExperimentStore } from "@/stores/experimentStore";

const router = useRouter();
const route = useRoute();
const experimentStore = useExperimentStore();

// Category management
const expandedCategories = ref(
  new Set<string>(experimentStore.categories.map((category) => category.id))
);

function toggleCategory(categoryId: string) {
  if (expandedCategories.value.has(categoryId)) {
    expandedCategories.value.delete(categoryId);
  } else {
    expandedCategories.value.add(categoryId);
  }
}

function navigateToExperiment(routeName: string) {
  const experiment = experimentStore.experiments.find(
    (exp) => exp.route === routeName
  );
  if (experiment) {
    experimentStore.setCurrentExperiment(experiment.id);

    // 检查该实验是否有专门的路由
    // 光学和电学实验有专门路由，其他类别使用通配符路由
    const hasDefinedRoute = router.hasRoute(routeName);

    if (hasDefinedRoute) {
      router.push({ name: routeName });
    } else {
      // 使用通配符路由并传递ID参数
      router.push({
        name: "experiment-coming-soon",
        params: { id: experiment.id },
      });
    }
  }
}

const currentExperimentName = computed(() => {
  const currentRoute = route.name as string;
  const experiment = experimentStore.experiments.find(
    (exp) => exp.route === currentRoute
  );

  if (experiment) {
    return experiment.name;
  }

  return (route.meta.title as string) || "首页";
});
</script>

<template>
  <div class="app-container">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="navbar-content">
        <div class="navbar-brand">
          <span class="brand-icon">🔬</span>
          <h1 class="brand-title" @click="router.push('/')">
            物理实验数据处理
          </h1>
        </div>
        <div class="navbar-info">
          <span class="info-badge">Beta</span>
          <span class="info-text">v1.0.0</span>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-wrapper">
        <!-- 左侧实验列表 -->
        <div class="sidebar">
          <div class="sidebar-container">
            <div class="sidebar-header">
              <h2 class="sidebar-title">物理实验列表</h2>
              <p class="sidebar-subtitle">请选择要处理的实验数据</p>
            </div>

            <!-- 最近使用的实验 -->
            <div
              v-if="experimentStore.recentExperimentsList.length > 0"
              class="recent-experiments"
            >
              <h3 class="section-heading">最近使用</h3>
              <div class="recent-list">
                <div
                  v-for="experiment in experimentStore.recentExperimentsList"
                  :key="experiment.id"
                  class="experiment-item"
                  :class="{ 'is-active': route.name === experiment.route }"
                  @click="navigateToExperiment(experiment.route)"
                >
                  <div class="experiment-item-content">
                    <span v-if="experiment.icon" class="experiment-icon">{{
                      experiment.icon
                    }}</span>
                    <span class="experiment-name">{{ experiment.name }}</span>
                  </div>
                  <span
                    v-if="!experiment.isImplemented"
                    class="status-badge coming-soon"
                    title="该实验正在开发中"
                  >
                    开发中
                  </span>
                  <span
                    v-else
                    class="status-badge implemented"
                    title="该实验已实现"
                  >
                    已实现
                  </span>
                </div>
              </div>
            </div>

            <div class="experiment-list">
              <h3 class="section-heading">所有实验</h3>
              <nav class="category-nav">
                <div class="category-list">
                  <div
                    v-for="category in experimentStore.categories"
                    :key="category.id"
                    class="category-item"
                  >
                    <!-- 分类标题 -->
                    <button
                      @click="toggleCategory(category.id)"
                      class="category-button"
                    >
                      <div class="category-label">
                        <span class="category-icon">{{ category.icon }}</span>
                        <span>{{ category.name }}</span>
                      </div>
                      <svg
                        class="category-arrow"
                        :class="{
                          'is-expanded': expandedCategories.has(category.id),
                        }"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                        aria-hidden="true"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                          clip-rule="evenodd"
                        />
                      </svg>
                    </button>

                    <!-- 实验列表 -->
                    <div
                      v-if="expandedCategories.has(category.id)"
                      class="experiment-submenu"
                    >
                      <div
                        v-for="experiment in experimentStore
                          .experimentsByCategory[category.id]"
                        :key="experiment.id"
                        class="experiment-item"
                        :class="{
                          'is-active': route.name === experiment.route,
                        }"
                        @click="navigateToExperiment(experiment.route)"
                      >
                        <div class="experiment-item-content">
                          <span
                            v-if="experiment.icon"
                            class="experiment-icon"
                            >{{ experiment.icon }}</span
                          >
                          <span class="experiment-name">{{
                            experiment.name
                          }}</span>
                        </div>
                        <span
                          v-if="!experiment.isImplemented"
                          class="status-badge coming-soon"
                          title="该实验正在开发中"
                        >
                          开发中
                        </span>
                        <span
                          v-else
                          class="status-badge implemented"
                          title="该实验已实现"
                        >
                          已实现
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </nav>
            </div>
          </div>
        </div>

        <!-- 右侧实验内容区域 -->
        <div class="main-experiment-content">
          <div class="experiment-container">
            <RouterView />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
}

.navbar {
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 40;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1536px;
  margin: 0 auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.brand-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.navbar-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.info-badge {
  background-color: #3b82f6;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.info-text {
  color: #6b7280;
  font-size: 0.875rem;
}

.main-content {
  flex: 1;
  padding: 1.5rem;
}

.content-wrapper {
  display: flex;
  gap: 1.5rem;
  max-width: 1536px;
  margin: 0 auto;
}

.sidebar {
  flex: 0 0 18rem;
  position: sticky;
  top: 5rem;
  height: calc(100vh - 7rem);
}

.sidebar-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sidebar-header {
  margin-bottom: 0.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.25rem 0;
}

.sidebar-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.section-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
}

.recent-experiments {
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.category-item {
  margin-bottom: 0.5rem;
}

.category-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.625rem 0.75rem;
  border: none;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  cursor: pointer;
  color: #374151;
  font-weight: 500;
  transition: background-color 0.2s;
}

.category-button:hover {
  background-color: #e5e7eb;
}

.category-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-icon {
  font-size: 1.25rem;
}

.category-arrow {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s;
}

.category-arrow.is-expanded {
  transform: rotate(180deg);
}

.experiment-submenu {
  margin-top: 0.375rem;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.experiment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  color: #4b5563;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.experiment-item:hover {
  background-color: #f9fafb;
  color: #111827;
}

.experiment-item.is-active {
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 500;
}

.experiment-item-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.experiment-icon {
  font-size: 1.125rem;
}

.status-badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  font-weight: 500;
  white-space: nowrap;
}

.status-badge.coming-soon {
  background-color: #fef3c7;
  color: #d97706;
}

.status-badge.implemented {
  background-color: #d1fae5;
  color: #059669;
}

.main-experiment-content {
  flex: 1;
}

.experiment-container {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  min-height: calc(100vh - 7rem);
}

@media (max-width: 1024px) {
  .content-wrapper {
    flex-direction: column;
  }

  .sidebar {
    flex: none;
    width: 100%;
    height: auto;
    position: static;
    margin-bottom: 1.5rem;
  }

  .sidebar-container {
    height: auto;
    max-height: 20rem;
  }
}
</style>
